﻿
@{
    ViewBag.Title = "临近店铺 | 大卫杜夫 | 雪茄";
    var list = ViewBag.list;
}

<div class="map_mainbox page_wrapper">
    <div class="row" style="margin:0px;">
        <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
            <div class="storebox">
                <div class="search">
                    <input type="text" placeholder="" class="search_text" onkeydown="enterSearch()">
                    <input type="button" class="btn_search" onclick="search()">
                </div>
                <div class="storelistbox" id="wp">
                        @foreach (var item in list)
                        {
                        <div class="storelist" onclick="getLoc(@item.LOC_X)" data-location="@item.LOC_X">
                            <div class="tt">
                                <h1>@item.STORE_NAME_EN</h1>
                                <h2>@item.STORE_NAME</h2>
                                <span>@item.CITY</span>
                            </div>
                            <div class="img">
                                <img src="@item.QR_CODE_IMG">
                            </div>
                            <div class="clear"></div>
                            <div class="phonebox">
                                <div><span class="label">电话&gt;</span>@item.TEL</div>
                                <div class="store_addr"><span class="label">地址&gt;</span>@item.ADDR</div>
                            </div>
                        </div>
                       }
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-7 col-lg-7 col-xl-7">
            <div class="overlay"></div>
            <div class="map_ditubox">
                <div id="map_ditu"></div>
            </div>
        </div>
    </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OLHBZ-SCFC6-5PESS-EDGTY-BCYWH-LDB7L"></script>
<script>
    var myLatitude = 0,
        myLongitude = 0;
    var StoreList;
    var tpl;
    function enterSearch(){
        if(event.keyCode==13)
        {
            search();
        }
    }

    function reorderStoreList() {
        var storeList = []
        var areaMap = []
        var areaOrder = ['+86', '+852', '+853']
        $('.storelist').each(function (){
            var store = $(this)
            var area = store.find('.phonebox div:first-child').text()
            area = area.replace(/.*(\+\d+).*/, '$1')
            if(areaOrder.indexOf(area) === -1) {
                areaOrder.push(area)
            }
            var map = areaMap[area] || (areaMap[area] = [])
            map.push(store)

            if (store.data('location')) {
                store.addClass('has-location')
            }
        })
        areaOrder.forEach(function (item) {
            storeList = storeList.concat(areaMap[item] || [])
        })

        if (storeList.length)
            $('.storelistbox').html('').append(storeList)
        else
            $('.storelistbox').html('<div class="storelist empty">没有查询到相关门店</div>')
    }

    function search() {
        var keyword = $(".search_text").val();
        var storeArr = [];
        let prdParams = {
            "cmd": "store.list.get",
            "param": {
                "KEY_WORD": keyword,
                "PAGE_INDEX": 1,
                "PAGE_SIZE": 10000
            }
        }
        $.ajax({
            type: "POST",
            url: "https://davidoff.com.cn/api/CMS",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(prdParams),
            dataType: "json",
            success: function (data) {
                storeArr = data.StoreList;
                // var loc = storeArr[0].LOC_X.split(',');
                // showmap(loc[0], loc[1]);
                /*===查询 start===*/
                $("#wp").empty();
                $.each(storeArr, function (index, item) {
                    var storeHtml = '<div class="storelist" onclick="getLoc(' + item.LOC_X + ')" data-location="' + item.LOC_X + '">' +
              '<div class="tt"><h1>' + item.STORE_NAME_EN + '</h1><h2>' + item.STORE_NAME + '</h2><span>' + item.CITY + '</span>' +
               '</div><div class="img"><img src="' + item.QR_CODE_IMG + '"></div><div class="clear"></div>' +
               '<div class="phonebox"><div><span class="label">电话&gt;</span>' + item.TEL + '</div' +
                  '<div class="store_addr"><span class="label">地址&gt;</span>' + item.ADDR + '</div></div></div>';
                    $("#wp").append(storeHtml);
                });
                /*===查询 end===*/

                reorderStoreList()
            },
            error: function (message) {
                alert(message)
            }
        });
    }

    function getLoc(loc_x,loc_y) {
       if (loc_x && loc_y) {
        showmap(loc_x, loc_y);
       }
    }

    function mapResize() {
        var winWidth = $(window).width();
        if (winWidth <= 768) {
            $(".storelist").bind("click", function () {
                $(".overlay,.map_ditubox").show();
            })
        }
    }

    function showmap(myLatitude, myLongitude) {
        console.log(myLatitude);
        console.log(myLongitude);
        var center=new qq.maps.LatLng(myLatitude, myLongitude)
        var map = new qq.maps.Map(
            document.getElementById("map_ditu"), {
                center: center,
                zoom: 13,
                draggable: true,
                scrollwheel: true,
                disableDoubleClickZoom: false
            }
        );
	var marker = new qq.maps.Marker({
              position: center,
             map: map
         });
    }

    $(function () {
        $(".overlay").bind("click", function () {
            $(".overlay,.map_ditubox").hide();
        })

        // Reorder sotre list
        reorderStoreList()

        // Set default map location
        var locDef = null
        $('.storelist').each(function () {
            var loc = $(this).data('location')
            if (!locDef && loc)
                locDef = loc.split(',')
        })
        if (locDef) {
            showmap(locDef[0],locDef[1]);
        }
        mapResize();
        $(window).resize(function () {
            mapResize();
        })
    })


</script>
